<template>
  <el-col class="info-wrapper" :span="23">
    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">检查派人</span>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">检查计划号</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">总人日</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">检查开始</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">检查结束</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content"  :span="24">
          <div class="col-content" style="padding: 8px;border-bottom: 1px solid #bbb;">
            <el-table border :data="uploadDocumentData">
              <el-table-column prop="date" label="审核员"> </el-table-column>
              <el-table-column prop="date" label="体系"> </el-table-column>
              <el-table-column prop="date" label="组内身份"> </el-table-column>
              <el-table-column prop="date" label="注册资格"> </el-table-column>
              <el-table-column prop="date" label="专业"> </el-table-column>
              <el-table-column prop="date" label="联系方式"> </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-tab-pane>
    </el-tabs>

    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">企业下未安排项目</span>
        <el-col :span="24">
          <el-table border :data="uploadDocumentData">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="date" label="合同编号"> </el-table-column>
            <el-table-column prop="date" label="证书号"> </el-table-column>
            <el-table-column prop="date" label="发证日期"> </el-table-column>
            <el-table-column prop="date" label="证书到期"> </el-table-column>
            <el-table-column prop="date" label="委托人"> </el-table-column>
            <el-table-column prop="date" label="生产者"> </el-table-column>
            <el-table-column prop="date" label="状态"> </el-table-column>
            <el-table-column prop="date" label="检查类型"> </el-table-column>
            <el-table-column prop="date" label="小类"> </el-table-column>
          </el-table>
        </el-col>
      </el-tab-pane>
    </el-tabs>

    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">项目计划</span>
        <el-form
          ref="form"
          class="search-from"
          :model="searchParams"
          label-width="120px"
        >
          <el-col class="search-col" :span="24">
            <el-form-item label="总人日" prop="produceCompany">
              <el-input v-model="searchParams.produceCompany"></el-input>
            </el-form-item>
          </el-col>
          <el-col class="search-col" :span="24">
            <el-form-item label="检测开始日期" prop="checkTaskId">
              <el-date-picker
                style="margin-right: 10px;"
                v-model="value1"
                type="date">
              </el-date-picker>
              <el-select
                style="width: 100px;"
                v-model="searchParams.province"
              >
                <el-option
                  v-for="item in dayList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="检查结束日期" prop="companyId">
              <el-date-picker
                style="margin-right: 10px;"
                v-model="value1"
                type="date">
              </el-date-picker>
              <el-select
                style="width: 100px;"
                v-model="searchParams.province"
              >
                <el-option
                  v-for="item in dayList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col class="search-col" :span="24">
            <el-form-item label="任务备注" prop="produceCompany">
              <el-input style="width: 500px;" type="textarea" :rows="4" v-model="searchParams.groupId"></el-input>
            </el-form-item>
          </el-col>
          <el-col class="search-col" :span="24">
            <el-form-item label="自用备注" prop="produceCompany">
              <el-input style="width: 500px;" type="textarea" :rows="4" v-model="searchParams.groupId"></el-input>
            </el-form-item>
          </el-col>
          <el-col class="search-col" :span="24">
            <el-form-item class="download-list" label="文件下载" prop="produceCompany">
              <div>
                <el-link :underline="false" @click="addUnitItem">XF07-08 检查任务通知书</el-link>
              </div>
              <div>
                <el-link :underline="false" @click="addUnitItem">XF07-08 认证收费通知书</el-link>
              </div>
            </el-form-item>
          </el-col>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">已派人信息</span>
        <el-col :span="24">
          <el-table border :data="uploadDocumentData">
            <el-table-column prop="date" label="审核员"> </el-table-column>
            <el-table-column prop="date" label="组内身份-注册资格"> </el-table-column>
            <el-table-column prop="date" label="资格号"> </el-table-column>
            <el-table-column prop="date" label="见证"> </el-table-column>
            <el-table-column prop="date" label="被见证人"> </el-table-column>
            <el-table-column prop="date" label="操作">
              <el-link type="primary" @click="addUnitItem">删除</el-link>
            </el-table-column>
          </el-table>
        </el-col>
      </el-tab-pane>
    </el-tabs>

    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">派人</span>
        <el-col :span="24">
          <el-table border :data="uploadDocumentData">
            <el-table-column prop="date" label="姓名" width="150">
              <el-input v-model="searchParams.produceCompany"></el-input>
            </el-table-column>
            <el-table-column prop="date" label="组内身份" width="120"> </el-table-column>
            <el-table-column prop="date" label="见证/被见证人员">
              <el-input style="width: 130px;" v-model="searchParams.produceCompany"></el-input> /
              <el-input style="width: 130px;" v-model="searchParams.produceCompany"></el-input>
            </el-table-column>
            <el-table-column prop="date" label="注册资格/资格号">
              <el-input style="width: 130px;" v-model="searchParams.produceCompany"></el-input> /
              <el-input style="width: 130px;" v-model="searchParams.produceCompany"></el-input>
            </el-table-column>
            <el-table-column prop="date" label="专业">
              <el-input v-model="searchParams.produceCompany"></el-input>
            </el-table-column>
          </el-table>
          <el-col class="submit-btn" :span="24">
            <el-checkbox v-model="checked" style="margin-right: 20px;">已派人</el-checkbox>
            <el-button type="primary" @click="submit">提交</el-button>
          </el-col>
        </el-col>
      </el-tab-pane>
    </el-tabs>
  </el-col>
</template>

<script>
export default {
  name: 'checkScheduleDetail',
  data() {
    return {
      defulatParams: {
        companyName: "", // 企业名称
        groupId: "", // 组织代码
        province: "", // 省份
        contacts: "", // 联系人
        companyId: "" // 工厂编号
      },
      searchParams: {
        ...this.defulatParams,
      },
      dayList: [{
        label: '上午',
        value: 1
      }, {
        label: '下午',
        value: 2
      }],
      uploadDocumentData: [{date: 123}]
    };
  },
  mounted() {
  },
  methods: {
  },
};
</script>

<style lang="less" scoped>
.info-wrapper {
  font-family: Source Han Sans CN;
  font-weight: 400;
  height: 100%;

  .search-from {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #c2d9e6;
    padding-top: 20px;

    .search-col {
      display: flex;
    }
  }

  .tabs-card {
    margin-bottom: 15px;
  }

  .row-content {
    border-top: 1px solid #bbb;
    border-left: 1px solid #bbb;
  }

  .title-span {
    text-align: center;
    background-color: #f0f5f8;
    justify-content: end;
    padding-right: 20px;
  }

  .col-content {
    min-height: 40px;
    border-right: 1px solid #bbb;
    padding-left: 4px;
    display: flex;
    align-items: center;
  }

  .table-span {
    padding: 8px;
    border-right: 1px solid #bbb;
  }
}

.submit-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0;
}
</style>
